<template>
    <div class="common-layout">
        <el-container>
            <el-header class="order-header">
                <el-form :inline="true" :model="searchForm" class="search-form">
                    <el-form-item>
                        <el-input v-model="searchForm.userId" placeholder="请输入用户id" clearable />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="searchForm.carId" placeholder="请输入车辆id" clearable />
                    </el-form-item>
                    <el-date-picker v-model="value" type="daterange" range-separator="到" start-placeholder="开始日期"
                        end-placeholder="结束日期" size="large" style="margin-top: -18px;" />
                    <el-form-item>
                        <el-button type="primary" @click="handleSearch(value)">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-header>
            <el-main>
                <el-table :data="orderData" stripe style="width: 100%">
                    <el-table-column prop="username" label="用户名" />
                    <el-table-column prop="carName" label="车名" />
                    <el-table-column prop="deposit" label="押金(单位：元)" />
                    <el-table-column prop="rentPrice" label="租金/天(单位：元)" />
                    <el-table-column prop="days" label="天数" />
                    <el-table-column prop="total" label="总额(单位：元)" />
                    <el-table-column prop="createTime" label="创建时间" width="200px" />
                    <el-table-column fixed="right" label="操作">
                        <template #default="scope">
                            <el-button link style="width: 40px;margin-left: 0px;" type="primary" size="large"
                                @click="handleEditOrder(scope.row.id)">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination class="pagination-centered" v-model:current-page="searchForm.currentPage"
                    v-model:page-size="searchForm.pageSize" :page-sizes="[5, 10, 15, 20]" :small="false"
                    :disabled="false" :background="false" layout="total, sizes, prev, pager, next, jumper"
                    :total="counts" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </el-main>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive, nextTick } from 'vue'
import { getOrderPage, updateUser } from '@/api'
import { ElMessage, DatePickerValue } from 'element-plus'
// 定义对象结构接口，只定义类型不赋初始值
interface Order {
    id: any;
    userId: any;
    userName: any;
    carId: any;
    carName: any;
    deposit: any;
    rentPrice: any;
    days: any;
    total: any;
    createTime: any;
}

// 列表数据
let orderData = ref<Order[]>([]);

//总页数
let counts = ref(0)
// 定义一个用于存储日期范围的ref
const value = ref<DatePickerValue>([])


// 定义搜索表单数据模型
let searchForm = reactive({
    userId: '',
    carId: '',
    startDate: '',
    endDate: '',
    currentPage: 1,
    pageSize: 5,
});

// 查询处理函数
const handleSearch = (value: DatePickerValue) => {
    if (value.length == 2) {
        searchForm.startDate = value[0].toISOString()
        searchForm.endDate = value[1].toISOString()
    }
    getOrderPage(searchForm).then(async (res: { data: any }) => {
        let resData = res.data.data
        if (res.data.code == 50041) {
            // 更新列表
            orderData = resData.records;
            // 更新总页数
            counts.value = resData.total
            // 使用nextTick确保DOM已更新
            await nextTick()
        } else {
            ElMessage({
                message: res.data.message,
                type: 'error'
            });
        }
    })
};


// 初始化方法
const init = () => {
    // 发送分页查询请求
    getOrderPage(searchForm).then((res: { data: any }) => {
        let resData = res.data.data
        if (res.data.code == 50041) {
            // 更新列表
            orderData.value = resData.records
            // 更新总页数
            counts.value = resData.total
        } else {
            ElMessage({
                message: res.data.message,
                type: 'error'
            });
        }
    })
}

// 编辑订单信息
const handleEditOrder = (id: any) => {
    // 发送消息给父窗口，告知要改变页面
    window.parent.postMessage({ action: 'changePage', url: '/#/order/add?id=' + id }, '*');
}

// // 汽车出库
// const handleAvailableUser = (id : any, available : any) => {
//     let params = reactive({
//         id: '',
//         available: '',
//     });
//     params.id = id
//     params.available = available == '1' ? '0' : '1'
//     updateUser(params).then((res: {data : any}) => {
//         if (res.data.code == 50031){
//             ElMessage({
//                 message: res.data.message,
//                 type: 'success'
//             });
//         }else{
//             ElMessage({
//                 message: res.data.message,
//                 type: 'error'
//             });
//         }
//     })
// }

// 在组件挂载时初始化数据
onMounted(() => {
    init();
});

// 监听页大小改变
const handleSizeChange = (val: number) => {
    searchForm.pageSize = val;
    init();
};

// 监听当前页改变
const handleCurrentChange = (val: number) => {
    searchForm.currentPage = val;
    init();
};

</script>

<style scoped>
.pagination-centered {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    /* 根据需要调整间距 */
}

.el-form-item {
    min-width: 150px;
}

.el-form {
    margin-top: 20px;
}

.demo-date-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
}

.demo-date-picker .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
}

.demo-date-picker .block:last-child {
    border-right: none;
}

.demo-date-picker .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

.order-header {
    overflow: hidden;
}
</style>